<template>
	<view class="agreeToast" :class="{hiddenToast: !toast}" :style="{color,width,height,background,borderRadius,bottom,fontSize,lineHeight}">
		{{title}}
	</view>
</template>

<script>
	const height = "76"
	export default {
		props:{
			title: {
				type: String,
				default: "default toast"
			},
			color: {
				type: String,
				default: "white"
			},
			width: {
				type: String,
				default: "86%"
			},
			height: {
				type: String,
				default: height+"rpx"
			},
			background: {
				type: String,
				default: "rgba(0,0,0,0.4)"
			},
			borderRadius: {
				type: String,
				default: (height/2)+"rpx"
			},
			position: {
				type: String,
				default: "bottom"
			},
			fontSize: {
				type: String,
				default: "16px"
			},
			lineHeight: {
				type: String,
				default: height+"rpx"
			}
		},
		data() {
			return {
				toast: false,
				timer: null
			};
		},
		methods:{
			showToast(){
				clearTimeout(this.timer)
				this.toast = true
				this.timer = setTimeout(()=>{
					this.toast = false
				},2000)
			}
		},
		computed:{
			bottom(){
				console.log(this.position)
				switch(this.position){
					case "bottom":
						return "112rpx"
					break;
					case "center":
						return "48%"
					break;
					case "top":
						return "calc(100vh - 112rpx)"
					break;
				}
			}
		}
	}
</script>

<style lang="scss">
.agreeToast{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
}
.hiddenToast{
	opacity: 0;
	transition:opacity 0.3s ease;
}
</style>
